import React, { Component } from 'react';
import { Icon } from 'antd';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      width: document.querySelector('body').offsetWidth
    }
  }

  componentDidMount() {

  }

  addSubtract(type, index) {
    this.props.addSubtract(type, index)
  }


  render() {
    let { width } = this.state
    let { num, total, index } = this.props
    return (
      <div className="App">
        <div className="pItem" style={{ height: 100, color: '#000', padding: 10 }}>
          {/* <p className="pItemSlogan">心宿花海 · 龙隐于湾</p>
          <p className="pItemTitle">滑草</p> */}
          <div style={{ float: 'left' }}>
            <p>价格</p>
            <p style={{ fontSize: 30, color: '#f90' }}>￥{total}</p>
          </div>
          <div style={{ float: 'right' }}>
            <p style={{ textAlign: 'right' }}>数量</p>
            <div style={{ height: '45px', lineHeight: '45px' }}>

              <Icon type="minus" onClick={this.addSubtract.bind(this, 'sub', index)} className="addSub" />
              <span style={{ margin: '0 10px' }}>{num}</span>
              <Icon type="plus" onClick={this.addSubtract.bind(this, 'add', index)} className="addSub" />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
